<template>
  <view class="l_f_c content">
    <view class="info_cnt l_f_c_c_c">
      <image :src="shopInfoData.shop_head" class="head"></image>
      <view>向商户“{{shopInfoData.name}}"支付</view>
    </view>
    <view class="pay_cnt flex_1">
      <view class="text_c_2d text_5_28">支付金额</view>
      <view class="l_f_r l_al_c input_box">
        <text class="text_b_36 text_c_2d">￥</text>
        <up-input border="none" placeholder="请输入支付金额" placeholder-style="color: #8F8F8F;" v-model="queryData.money"></up-input>
      </view>
    </view>
    <view class="pay_btn l_f_r_c_c text_w">支付</view>

  </view>
</template>

<script setup lang="ts">
import {ref} from "vue";
const {proxy} = getCurrentInstance();

const optionRef = ref({});

const queryData=ref({
  id: 0,
  money: 0
})




onLoad((e)=>{
  optionRef.value = e;
  shopInfo()
})

const shopInfoData = ref({})

function shopInfo() {
  proxy.$request({
    url: `api/shopInfo/?id=${optionRef.value.id}`,
    method: 'get',
    success(res) {
      console.log(res, "rres")
      shopInfoData.value = res.data
    }
  })
}
</script>


<style scoped lang="scss">
.content{
  height: 100vh;
  width: 100vw;
  background:#F8F8F8;
  overflow: hidden;
}
.info_cnt{
  width: 100vw;
  padding-bottom: 70rpx;

  .head{
    width: 144rpx;
    height: 144rpx;
    border-radius: 50%;
    margin: 96rpx auto 20rpx;

  }

}
.pay_cnt{
  width: 750rpx;
  background: #FFFFFF;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  padding: 30rpx 50rpx;
  .text_b_36{
    font-size: 48rpx;
    margin-right: 20rpx;
  }
  .input_box{
    margin-top: 20rpx;
    padding-bottom: 10rpx;
    border-bottom: 1rpx solid #E5E5E5;
  }
}
.pay_btn{
  width: 690rpx;
  height: 80rpx;
  background: #F63B29;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  position: absolute;
  bottom: 50rpx;
  left: 50%;
  transform: translateX(-50%);
}
</style>
